<template>
  <div class="index">
    <van-search
      v-model="query.name"
      shape="round"
      placeholder="请输入线索客户名称"
      :clearable="false"
      show-action
      @input="search"
    >
      <template #action>
        <div @click="search()">搜索</div>
      </template>
    </van-search>

    <van-tabs @click="(id) => (query.seaId = id)" :swipe-threshold="2">
      <van-tab v-for="(item, index) in list" :key="index" :name="item.id" :title="item.name">
        <!--  -->
        <van-tabs v-if="query.seaId == 'my'" @click="(status) => (query.status = status)">
          <van-tab v-for="(item, status) in statusDict" :key="status" :name="status" :title="item">
            <SeaCard :ref="'listMy' + status" :query="query" />
          </van-tab>
        </van-tabs>

        <SeaCard v-else :ref="'list' + item.id" :query="query" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import SeaCard from './SeaCard'
import { getSeaList } from '@/views/clueHighseas/api'
export default {
  components: { SeaCard },
  data() {
    return {
      loading: false,
      query: {
        pageNum: 1,
        pageSize: 10,
        name: '',

        seaId: 'my', // 公海id

        status: 1, // 我的跟进 线索状态(0待分配，1跟进中，2已转化，3已退回)
      },
      statusDict: { 1: '跟进中', 3: '已退回', 2: '已转化' },
      list: [],
    }
  },
  created() {
    this.getSeaList()
    // this.getList(1)
    // this.getNum('one')
  },
  methods: {
    search() {
      if (this.query.seaId == 'my') {
        this.$refs[`listMy${this.query.status}`][0].$refs.pullRefreshScrollLoadList.getList(1)
      } else {
        this.$refs[`list${this.query.seaId}`][0].$refs.pullRefreshScrollLoadList.getList(1)
      }
    },
    // 获取公海列表
    getSeaList() {
      this.loading = true
      getSeaList(this.query)
        .then(({ data }) => {
          this.list = [{ name: '我的跟进', id: 'my' }].concat(data)
          this.query.seaId = this.list[0].id
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.van-field__left-icon {
  display: none;
}
</style>
